import { APlugin } from '../types/common.interface';
import { Injectable, Inject } from '../decorators/inject';
import { NExcel } from '../types';
import { circlClose } from '../vars/icons';
import './modal.less';
export interface ChildModal {
    containerEle: HTMLElement;
    onSure: TCallback,
    onClose: TCallback,
}
type TCallback = () => Promise<boolean>;
@Injectable()
export class ModalPlugin extends APlugin {
    protected defaultModalWidth = 420;
    protected defaultModalHeight = 464;
    protected container: HTMLElement;
    protected mask: HTMLElement;
    protected _onClose: TCallback;
    protected _onSure:  TCallback;
    protected modalBodyEle: HTMLElement;
    protected childModalInstance: ChildModal;
    constructor(
        @Inject(NExcel.OperateContainerToken) protected OperateContainerEle: HTMLElement,
        @Inject(NExcel.TableContainerEleToken) protected canvasContainerEle: HTMLElement
    ) {
        super();
    }
    protected getDefaultModalStyle() {
        return `width: ${this.defaultModalWidth}px;`;
    }
    public init(): void {
        this.container = document.createElement('div');
        this.container.setAttribute('class', 'z-table-modal-container');
        this.container.setAttribute('style', 'top: 0px;left: 0px;');
        this.container.innerHTML = `
            <div class="z-table-modal-header">
                <div class="z-table--modal-header-left"></div>
                <div class="z-table--modal-header-center">单元格格式</div>
                <div class="z-table--modal-header-right">
                    <div class="z-table--modal-header-operate z-table--modal-header-operate-close">
                        ${circlClose}
                    </div>
                </div>
            </div>
            <div class="z-table-modal-body">
            </div>
            <div class="z-table-modal-footer">
                <a class="z-table-modal-footer-btn" zValue="cancel">取消</a>
                <a class="z-table-modal-footer-btn z-table-btn-primary" zValue="sure">确定</a>
            </div>
        `;
        this.modalBodyEle = this.container.querySelector('.z-table-modal-body');
        this.container.querySelector('.z-table--modal-header-operate-close').addEventListener('click', (e) => {
            e.stopPropagation();
            e.preventDefault();
            try {
                this.childModalInstance.onClose().then(res => {
                    if(res) {
                        this.closeModal();
                    }
                });
            } catch (error) {
                
            }
        });
        this.container.querySelector('.z-table-modal-footer .z-table-modal-footer-btn').addEventListener('click', (e) => {
            try {
                let type = (<HTMLElement>e.target).getAttribute('zValue') as 'sure'|'cancel';
                if(type === 'sure') {
                    this.childModalInstance.onSure().then(res => {
                        if(res) {
                            this.closeModal();
                        }
                    });
                }
                if(type === 'cancel') {
                    this.childModalInstance.onClose().then(res => {
                        if(res) {
                            this.closeModal();
                        }
                    });
                }
            } catch (error) {
                
            }
        });
        this.container.addEventListener('contextmenu', (e) => {
            e.stopPropagation();
            e.preventDefault();
        });
        this.container.addEventListener('scroll', (e) => {
            e.stopPropagation();
            e.preventDefault();
        })
        this.OperateContainerEle.append(this.container);
        this.initDragMove();
    }
    protected closeModal() {
        this.container.removeAttribute('style');
        this.modalBodyEle.removeChild(this.childModalInstance.containerEle);
    }
    public show(child: ChildModal) {
        this.childModalInstance = child;
        // this.container.setAttribute('style', 'display: block;');
        this.container.style.display = 'block';
        let containerW = this.canvasContainerEle.clientWidth;
        let containerH = this.canvasContainerEle.clientHeight;
        let defaultTop = (containerH - this.defaultModalHeight) / 2;
        let defaultLeft = (containerW - this.defaultModalWidth) / 2;
        this.container.setAttribute('style', `${this.getDefaultModalStyle()}top:${defaultTop}px;left: ${defaultLeft}px;display: block;`)
        this.modalBodyEle.appendChild(this.childModalInstance.containerEle);
    }
    private getEventPosition(evt: MouseEvent) {
        return {
            x: evt.screenX,
            y: evt.screenY
        }
    }
    protected initDragMove() {
        let headerEle = this.container.querySelector('.z-table-modal-header') as HTMLDivElement;
        headerEle.addEventListener('mousedown', (mousedownEvt) => {
            const originPosition = this.getEventPosition(mousedownEvt);
            const changePosition = (() => {
                let top = this.container.style.top ? Number(this.container.style.top.replace('px','')) : 0;
                let left = this.container.style.left ? Number(this.container.style.left.replace('px','')) : 0;
                return (currentTop: number, currentLeft: number) => {
                    let moveTop = currentTop - originPosition.y;
                    let moveLeft = currentLeft - originPosition.x;
                    this.container.setAttribute('style', `${this.getDefaultModalStyle()}top: ${top + moveTop}px;left: ${left + moveLeft}px;display:block;`);
                }
            })();
            const mousemoveCallback = (moveEvt: MouseEvent) => {
                let currentPostion = this.getEventPosition(moveEvt);
                changePosition(currentPostion.y, currentPostion.x);
            }
            const mouseupCallback =  () => {
                document.removeEventListener('mousemove', mousemoveCallback);
                document.removeEventListener('mouseup', mouseupCallback);
            }
            document.addEventListener('mousemove',mousemoveCallback);
            document.addEventListener('mouseup', mouseupCallback)
        });
    }
    public destroy(): void {
        
    }
}